import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Note from '~/components/text/note'
import { InlineCode } from '~/components/text/code'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploying Sanity Studio with ZEIT Now',
  description: 'Deploy your Sanity Studio with ZEIT Now.',
  name: 'Sanity Studio',
  type: 'app',
  published: '2019-05-30T03:00:00.000Z',
  authors: ['knut'],
  url: '/guides/deploying-sanity-studio-with-now',
  image:
    'https://og-image.now.sh/Deploy%20Sanity%20with%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F3do82whm%2Fproduction%2F32ad3bafc3c20872754ca164eece005c6827fac4-186x247.svg',
  editUrl: 'pages/guides/deploying-sanity-studio-with-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Sanity.io](https://www.sanity.io) is a platform for structured content with an open source editing environment. Sanity Studio is a single page app written in React, where you can configure the document types and input fields, with simple JavaScript objects. The Studio connects to Sanity’s hosted real-time APIs. You can also customize the Studio with your own input components, plugins, and tools.

This guide will walk you through how to deploy Sanity Studio with ZEIT Now in three simple steps.

<Image
  src={`${
    process.env.ASSETS
  }/guides/deploying-sanity-studio-with-now/deploying-sanity-studio-with-now.png`}
  width={3200 / 2.75}
  height={1684 / 2.75}
  oversize
/>

## Step 1: Setting Up your Sanity Studio Project

<Note>You can skip this step if you already have a project set up.</Note>

First, install the [Sanity CLI](https://www.npmjs.com/package/@sanity/cli):

<Snippet dark text="npm i -g @sanity/cli" />
<Caption>Adding the Sanity CLI as a global package to enable use of the <InlineCode>sanity</InlineCode> command.</Caption>

To initiate a new project and download the Studio code to your computer, run the following in the command line:

<Snippet dark text="sanity init" />
<Caption>Initiating a new Sanity project.</Caption>

The Sanity CLI will walk you through the necessary steps to set up a project, letting you choose a schema template. When you're done with these steps, the CLI will download the source code and configuration to get you started. To start a local development server, `cd` into the project folder and run the following command:

<Snippet dark text="sanity start" />
<Caption>Starting a local development server for Sanity Studio.</Caption>

Check out [Sanity’s documentation](https://sanity.io/docs) to learn more about how to configure and customize the Studio.

## Step 2: Preparing for Deployment

To provide ZEIT Now with routing information for the app, add a `now.json` file with the following content:

```json
{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}
```

<Caption>
  An example <InlineCode>now.json</InlineCode> file that adds routes to the
  project.
</Caption>

ZEIT Now provides an environment to deploy all types of projects, including static files, making it a good option for deploying your Sanity project with **a single command**.

Add the following scripts to the Studio’s `package.json` file:

```json
{
  ...
  "scripts": {
    "start": "sanity start",
    "test": "sanity check",
    "build": "sanity build public -y"
  }
}
```

<Caption>
  Adding build scripts to your Sanity project's{' '}
  <InlineCode>package.json</InlineCode> file.
</Caption>

<Note>
  The <InlineCode>-y</InlineCode> argument in the <InlineCode>build</InlineCode>{' '}
  accepts the defaults for Sanity's build, otherwise the deployment will hang
  when Sanity's CLI asks questions.
</Note>

Lastly, add `@sanity/cli` as a [development dependency](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), this will allow [ZEIT Now](/) to build your project on deployment.

<Snippet dark text="npm i -D @sanity/cli" />
<Caption>
  Adding the Sanity CLI to the project as a development dependency.
</Caption>

After saving your `package.json` file you will be ready to deploy your project.

## Step 3: Deploy With ZEIT Now

<DeploySection meta={meta} />

Once Sanity Studio is deployed, you will need to add it's URL to Sanity’s [CORS origins](https://www.sanity.io/docs/front-ends/cors) settings. You can do this from the command line:

<Snippet dark text="sanity cors add https://your-url.now.sh --credentials" />
<Caption>Adding CORS credentials to your Sanity project.</Caption>

Alternatively, you can navigate to [manage.sanity.io](https://manage.sanity.io), find your project and under Settings > API, add the Studio URL to the CORS origins list. You should allow credentials as the Studio requires authentication for added security whereas most frontends do not.

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
